<template>
  <div v-if="ecardDetails">
    <div class="demo-image">

    </div>
    <nav1 @navClick="navClick"></nav1>
    <paper v-if="index===1" :ecardDetails="ecardDetails"></paper>
    <div class="contentmain" v-if="index===0">
      <div class="contentLeft">
        <div class="left1" >
          <div class="left1h"><h3>基本信息</h3></div>
          <div style="margin: 20px auto 20px ;width: 150px">
            <img :src="ecardDetails.eimg" style="max-height: 150px ;">
          </div>
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
            <p><span>姓名：{{ecardDetails.ename}}</span></p>
            <p><span>性别：{{ecardDetails.egender}}</span></p>
            <p><span>年龄：{{ecardDetails.eage}}</span></p>
            <p><span>民族：{{ecardDetails.enation}}</span></p>
            <p><span>籍贯：{{ecardDetails.enative}}</span></p>
            <p><span>事务所：{{ecardDetails.ecollege}}</span></p>
            <p><span>联系地址：{{ecardDetails.eteachOffice}}</span></p>
            <p><span>职称：{{ecardDetails.eprofessionalTitle}}</span></p>
            <p><span>E-mail：{{ecardDetails.email}}</span></p>
          </div>
          </div>
        </div>
        <div class="left2">
          <div class="left2h"><h3>咨询课程</h3></div>
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
              <p v-for="(item) in ecardDetails.teachCources"><span>{{item.courceInfo}}</span></p>
            </div>
          </div>
        </div>
      </div>

      <div class="contentRight">
        <div class="right1">
          <div class="right1h"><h3>荣誉称号</h3></div>
          <el-scrollbar style="height:200px">
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
              <p v-for="(item) in ecardDetails.awards"><span>{{item.awardsInfo}}</span></p>
            </div>
          </div>
          </el-scrollbar>
        </div>

        <div class="right2">
          <div class="right1h"><h3>教育经历</h3></div>
          <el-scrollbar style="height:200px">
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
              <p v-for="(item) in ecardDetails.eduBackgrounds"><span>{{item.eduBackgroundInfo}}</span></p>
            </div>
          </div>
          </el-scrollbar>
        </div>
        <div class="right3">
          <div class="right1h"><h3>工作经历</h3></div>
          <el-scrollbar style="height:200px">
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
              <p v-for="(item) in ecardDetails.works"><span>{{item.workInfo}}</span></p>
            </div>
          </div>
          </el-scrollbar>
        </div>
        <div class="right4">
          <div class="right1h"><h3>咨询方向</h3></div>
          <el-scrollbar style="height:200px">
          <div style="padding: 0px 6px" class="ele-p1">
            <div style="padding: 20px 15px">
              <p v-for="(item) in ecardDetails.studyDirections"><span>{{item.directionInfo}}</span></p>
            </div>
          </div>
          </el-scrollbar>
        </div>

      </div>

    </div>
    <div style="display: flex;justify-content:center">
    <el-button type="success" style="margin-right: 20px" v-if="user.rid==1" @click="insertMyprimary(user.id,ecardDetails.id)" :disabled="disabled" round>加入预选单</el-button>
    <el-button type="success" style="margin-right: 20px" v-if="user.id==ecardDetails.uid" round @click="editmycard(ecardDetails.id)">修改名片</el-button>
    <el-button type="primary" @click="back" round>返回</el-button>
    </div>
    <foot style="margin-top: 10px"></foot>
  </div>
</template>

<script>
import {queryecardDetail} from "@/api/vcard";
import {queryMycard} from "@/api/vcard";
import {addMyprimary} from "@/api/vcard";
import Foot from "@/components/foot";
import Nav1 from "@/components/nav";
import Paper from "@/views/Paper";

export default {
  name: "ecardDetail",
  components: {Paper, Foot,Nav1},
  data() {
    return {
      ecardDetails:null,
      index:0,
      user:{},
      disabled:false
    }
  },
  created() {
    if(this.$route.query.uid) {
      queryMycard(this.$route.query.uid).then(resp => {
        if (resp.result ==null) {
          this.$router.push("tecidcard");
        }
          this.ecardDetails = resp.result
          console.log(this.ecardDetails)
      })
    }
    if(this.$route.query.id) {
      console.log(this.ecardDetails);
      queryecardDetail(this.$route.query.id).then(resp => {
        this.ecardDetails = resp.result
        console.log(this.ecardDetails)
      })
    }
  },
  mounted() {
    this.user=JSON.parse(sessionStorage.getItem("user"))
    console.log(this.user)
  },
  methods:{
    editmycard(eid){
      this.$router.push({
        name : 'tecidcard',
        query :{
          eid : eid,
        }
      });
    },
    navClick(index){
     this.index = index;
      console.log(index);
    },
    insertMyprimary(uid,eid){
      addMyprimary(uid,eid).then(resp => {
          if(resp.success){
            // console.log(resp.message);
            // alert(resp.message)
            this.$notify({
              title: '成功',
              message: resp.message,
              type: 'success'
            });
            this.disabled=true
          }
          else{
            // console.log(resp.message);
            // alert(resp.message);
            this.$notify.error({
              title: '错误',
              message: resp.message
            });
          }
      })
    },
    back(){
      history.back()
    }
  },


}
</script>

<style scoped>
.el-scrollbar__bar {
  opacity: 1;
}
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
.demo-image{
  background :url("../images/banner.png") no-repeat;
  background-size: 100% 100%;
  object-fit: cover; /* background-size */ object-position: center;
  height :150px;
  width :100%;
}
.contentmain{
  width: 1248px;
  min-height: 1000px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-around;
}
.contentLeft{
  width: 415px;
  min-height: 1100px;
}
h3{
  margin-left: 10px;
  color: white;
}
p span{
  font-size: 20px;
}
.left1{
  height: 624px;
  width: 392px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.left1h{
  height: 45px;
  background-color:#0462C3 ;
  font-size: 14px;
  color: white;
  line-height: 45px;
  font-weight: bolder;
}
.left2{
  margin-top: 10px;
  height: 400px;
  width: 392px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.left2h{
  height: 45px;
  background-color:#0462C3 ;
  font-size: 14px;
  color: white;
  line-height: 45px;
  font-weight: bolder;
}
.contentRight{
  width: 832px;
  min-height: 1100px;
}
.right1{
  width: 808px;
  height: 250px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.right1h{
  width: 100%;
  height: 45px;
  background-color:#0462C3 ;
  color: white;
  line-height: 45px;
  font-weight: bolder;
}
.right2{
  margin-top: 10px;
  width: 808px;
  height: 250px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.right3{
  margin-top: 10px;
  width: 808px;
  height: 250px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}
.right4{
  margin-top: 10px;
  width: 808px;
  height: 255px;
  border:solid 1px #0462C3;
  border-radius: 5px;
}

div p{
  margin: 5px;
}
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>